<template>
  <div class="liscensePage">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>证书管理</el-breadcrumb-item>
      <el-breadcrumb-item>证书查询</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-input
            placeholder="请输入成员姓名、员工号、身份证号或公司名"
            v-model="queryInfo.query"
            class="input-with-select"
            clearable
            @change="querySearch"
            size="mini"
          >
            <el-button slot="append" icon="el-icon-search" @click="getMemberList" size="mini"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="SearchMany" size="mini">批量查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="exportExcel" size="mini">导出EXCEL</el-button>
        </el-col>
        <el-col :span="6"> </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="addBtnClick" size="mini">添加证书</el-button>
        </el-col>
      </el-row>

      <!-- 证书显示的表格区域 -->
      <el-table :data="memberList" stripe style="width: 100%" border highlight-current-row cell-class-name="tableCell" size="mini">
        <el-table-column type="expand" width="40">
          <template slot-scope="props">
            <el-carousel type="card" height="800px" v-if="props.row.liscenses.length">
              <el-carousel-item v-for="liscense in props.row.liscenses" :key="liscense.id" v-if="liscense.pdffile.pdffile_path">
                <pdf :src="liscense.pdffile.pdffile_path" v-if="/\.(pdf|PDF)$/.test(liscense.pdffile.pdffile_path)"></pdf>
                <el-image style="width: 500x; height: 800px" :src="liscense.pdffile.pdffile_path" fit="contain" v-else>
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </el-carousel-item>
            </el-carousel>
            <h3 v-else>暂未录入证书信息</h3>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="60"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="60"> </el-table-column>
        <el-table-column prop="id_num" label="身份证号" width="160"> </el-table-column>
        <el-table-column prop="company" label="公司" width="60"> </el-table-column>
        <el-table-column label="证书">
          <template slot="header" slot-scope="scoped">
            <el-row>
              <el-col :span="3">证书</el-col>
              <el-col :span="4">发证机构</el-col>
              <el-col :span="4">有效期</el-col>
              <el-col :span="4">是否已审查</el-col>
              <el-col :span="4">审查人</el-col>
              <el-col :span="5">操作</el-col>
            </el-row>
          </template>
          <template slot-scope="scope">
            <el-row v-for="liscense in scope.row.liscenses" :key="liscense.id" :class="['bdtop']">
              <el-col :span="3">
                <el-tag>{{ liscense.name }}{{ liscense.level }}</el-tag>
              </el-col>
              <el-col :span="4">{{ liscense.organ }}</el-col>
              <el-col :span="4">{{ liscense.empire_date }}</el-col>
              <el-col :span="4">
                <el-switch active-color="#13ce66" @change="confirmChange(liscense)" v-model="liscense.is_confirmed"></el-switch>
              </el-col>
              <el-col :span="4" v-if="liscense.confirm_user">
                {{ liscense.confirm_user.username }}
              </el-col>
              <el-col :span="4" v-else>暂未审核</el-col>
              <el-col :span="5">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="editLiscense(liscense.id)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeLiscense(liscense.id)"></el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能区 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        size="mini"
      >
      </el-pagination>
    </el-card>

    <!-- 批量查询的对话框 -->
    <el-dialog title="录入需查询的人员名单" :visible.sync="SearchDialogVisible" width="60%" :before-close="SearchDialogClose">
      <el-transfer
        filterable
        :filter-method="memberFilterMethod"
        filter-placeholder="请输入关键字"
        v-model="memberIdList"
        :data="memberData"
        style="width: 100%;"
        :titles="['待选择人员', '已选择人员']"
        class="memberSelect"
      >
      </el-transfer>
      <span slot="footer" class="dialog-footer">
        <el-button @click="SearchDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmManyFilter">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  data() {
    return {
      queryInfo: {
        memberIdStr: '',
        query: '',
        pagesize: 20,
        pagenum: 1
      },
      // 批量查询的id数组
      memberIdList: [],
      // 查询到的member数量
      total: 20,
      liscenseList: [],
      memberList: [],
      // 批量查询对话框显示
      SearchDialogVisible: false,
      // 根据关键字查询后的待选择的members
      memberData: []
    }
  },
  created() {
    this.getMemberList()
    this.getAllMembers()
  },
  methods: {
    // 点击添加证书按钮后跳转路由
    addBtnClick() {
      this.$router.push('/addLiscense')
    },
    // 获取按照member排列的证书列表
    async getMemberList() {
      const { data: res } = await this.$http.get('liscense/getliscense/', { params: this.queryInfo })
      if (res.meta.status === 200) {
        this.memberList = res.data.member_list
        this.total = res.data.total
        this.queryInfo.pagenum = res.data.pagenum
        return this.$message.success('获取证书列表成功！')
      } else if (res.meta.status === 201) {
        this.memberList = []
        this.total = 0
        this.queryInfo.pagenum = 1
        return this.$message.info('未查询到相关证书')
      } else {
        this.memberList = []
        this.total = 0
        this.queryInfo.pagenum = 1
        return this.$message.error('查询证书信息失败')
      }
    },
    // 根据关键字查询
    querySearch() {
      this.queryInfo.memberIdStr = ''
      this.getMemberList()
    },
    // 证书是否已经审查状态切换函数
    async confirmChange(liscense) {
      // 发送请求修改审核状态
      const { data: res } = await this.$http.put(`/liscense/changeliscensestate/${liscense.id}/state/${liscense.is_confirmed}/`)
      console.log(res)
      if (res.meta.status !== 200) {
        liscense.is_confirmed = !liscense.is_confirmed
        return this.$message.error(res.meta.message)
      }
      liscense.confirm_user = res.data.liscense.confirm_user
      this.$message.success('审核状态修改成功！')
    },
    // 根据id删除liscense
    async removeLiscense(liscense_id) {
      const confirmResult = await this.$confirm('此操作将永久删除该证书信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      if (confirmResult !== 'confirm') return
      const { data: res } = await this.$http.delete(`/liscense/removeliscense/${liscense_id}`)
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.message)
      }
      this.$message.success(res.meta.message)
      this.getMemberList()
    },
    // 根据id编辑liscense
    editLiscense(liscense_id) {
      this.$router.push(`/editliscense/?id=${liscense_id}`)
    },
    // 处理分页尺寸变化
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getMemberList()
    },
    // 处理当前页码发生变化
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getMemberList()
    },
    // 导出excel
    async exportExcel() {
      const { data: res } = await this.$http.get('/liscense/exportoexcel/', { params: this.queryInfo })
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('证书导出到excel失败！')
      }
      window.open(res.data.excel_url)
      return this.$message.success('证书导出到excel成功！')
    },
    // 点击批量查询按钮时
    SearchMany() {
      this.SearchDialogVisible = true
    },
    // 批量查询对话框关闭前钩子函数
    SearchDialogClose() {
      this.memberIdList = []
      this.SearchDialogVisible = false
    },
    // 获取所有的members
    async getAllMembers() {
      const queryObj = {
        query: '',
        pagesize: 100,
        pagenum: 1
      }
      const { data: res } = await this.$http.get('liscense/getmember', { params: queryObj })
      if (res.meta.status !== 200) {
        return this.$message.error('获取成员列表失败')
      }
      res.data.page_members.forEach(member => {
        this.memberData.push({
          label: member.name + `(${member.id_num})`,
          key: member.id,
          keywords: member.name + member.company + member.id_num + member.p_num
        })
      })
      // console.log('memberData')
      // console.log(this.memberData)
    },
    // member过滤方法
    memberFilterMethod(query, item) {
      return item.keywords.indexOf(query.toUpperCase()) > -1
    },
    // 点击批量查询对话框的确定按钮
    async confirmManyFilter() {
      this.queryInfo.memberIdStr = this.memberIdList.join(',')
      console.log(this.queryInfo.memberIdStr)
      this.getMemberList()
      this.SearchDialogVisible = false
      this.memberIdList = []
      this.$message.success('批量查询成功')
    }
  }
}
</script>

<style lang="less">
.liscensePage {
  .el-tag {
    margin: 7px;
  }

  .bdtop {
    border-bottom: 1px solid rgb(220, 200, 220);
  }

  .bdbottom {
    border-bottom: 1px solid rgb(220, 220, 220);
  }

  .el-row {
    text-align: center;
    display: flex;
    align-items: center;
  }
  .el-transfer__buttons {
    padding: 0 4% !important;
  }
  .el-transfer-panel {
    width: 40% !important;
  }
}
</style>
